<!DOCTYPE html>

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>自定义指令</title>
      <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
      <style>
          .row { line-height: 30px ; margin: 5px auto ; }
          input[type=text] { border: 1px solid #dedede ; outline: none ; }
          input[type=text]:focus { border-color: green; }
      </style>
      <script src="/javascripts/vue@3.0.11.js" ></script>
  </head>
  <body>

    <div class="container" id="first">
        <div class="row border">
            <div class="col-3">自动获得焦点</div>
            <div class="col-6">
                <!-- v-directiveName:parameter.modifier="value" -->
                <input type="text" v-model="nickname" v-focus:name.private="nickname">
            </div>
            <div class="col-3">{{nickname}}</div>
        </div>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return { nickname: '' }
            }
        });

        const definition = {
            beforeMount(el){
                console.log( 'before mount:' , el );
            },
            mounted(el,binding){
                el.focus(); // 调用原生JavaScript提供的方法让元素获得焦点
                console.log( 'mounted:' , el , binding );
            },
            beforeUpdate(el){
                console.log( 'before update' , el);
            },
            updated(el,binding,vnode,oldVnode){
                console.log( 'updated:' , el , binding , vnode , oldVnode );
            }
        }

        // 注册指令(全局注册)
        // app.directive( directiveName , directiveDefinition )
        app.directive( 'focus' , definition );

        const vm = app.mount( '#first' );
        console.log( vm );

    </script>

  </body>
</html>